<template>
  <div class="order-detail-container">
    <el-skeleton :rows="10" animated v-if="loading" />
    <el-card class="box-card" v-else-if="order">
      <template #header>
        <div class="card-header">
          <span>订单详情</span>
          <el-tag :type="statusTagType">{{ statusText }}</el-tag>
        </div>
      </template>

      <div class="section">
        <h4>订单信息</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ order.orderNumber }}</el-descriptions-item>
          <el-descriptions-item label="订单总价">
            <span class="price">¥{{ order.finalPrice }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDateTime(order.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ formatDateTime(order.payTime) }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="section">
        <h4>收货信息</h4>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="收货人">{{ order.consignee }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ order.phone }}</el-descriptions-item>
          <el-descriptions-item label="收货地址">{{ order.address }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ order.remark || '无' }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="section">
        <h4>宠物信息</h4>
        <div class="animal-info" v-if="order.animalInfo">
          <el-image :src="order.animalInfo.imageUrl" class="animal-image" fit="cover"/>
          <div class="animal-details">
            <p><strong>名称:</strong> {{ order.animalInfo.name }}</p>
            <!-- 您可以在 OrderVO 中添加更多宠物信息字段来展示 -->
          </div>
        </div>
      </div>

      <div class="actions">
        <el-button type="primary" @click="router.push('/user/orderlist')">返回我的订单</el-button>
      </div>

    </el-card>
    <el-empty description="订单不存在或无权访问" v-else />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getOrderDetail } from '@/api/order.js'; // 确保 order.js 中有此函数

const route = useRoute();
const router = useRouter();

const loading = ref(true);
const order = ref(null);

const fetchOrderDetail = async () => {
  const orderId = route.params.id;
  if (!orderId) {
    ElMessage.error('无效的订单ID');
    loading.value = false;
    return;
  }
  try {
    const res = await getOrderDetail({ id: orderId });
    if (res.data) {
      order.value = res.data;
    } else {
      ElMessage.error(res.message || '获取订单详情失败');
    }
  } catch (error) {
    console.error("获取订单详情失败:", error);
    ElMessage.error('网络请求失败');
  } finally {
    loading.value = false;
  }
};

const statusMap = {
  0: { text: '待支付', type: 'warning' },
  1: { text: '已完成', type: 'success' },
  2: { text: '已取消', type: 'info' }
};

const statusText = computed(() => order.value ? statusMap[order.value.status]?.text || '未知状态' : '');
const statusTagType = computed(() => order.value ? statusMap[order.value.status]?.type || 'info' : 'info');

const formatDateTime = (time) => {
  if (!time) return 'N/A';
  return new Date(time).toLocaleString();
}

onMounted(fetchOrderDetail);
</script>

<style scoped>
.order-detail-container {
  max-width: 900px;
  margin: 20px auto;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}
.section {
  margin-bottom: 25px;
}
.section h4 {
  margin-bottom: 15px;
  font-size: 16px;
  border-left: 3px solid #409EFF;
  padding-left: 10px;
}
.price {
  color: #f56c6c;
  font-weight: bold;
}
.animal-info {
  display: flex;
  align-items: center;
  gap: 20px;
}
.animal-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}
.actions {
  text-align: right;
  margin-top: 20px;
}
</style>